<template>
    <div class="componentContainer">
        <div class="searchContainer">
            <ComponentSearch />
        </div>
        <div>
            <el-table
                :data="componentDataList.dataList"
                style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                row-key="id"
                border
                :stripe="true"
                :show-overflow-tooltip="true"
                class="tableContainer"
                max-height="70vh"
                ref="containerRef"
            >
                <el-table-column prop="componentName" label="组件名称-英文" />
                <el-table-column prop="componentCnName" label="组件名称-中文" />
                <el-table-column prop="componentType" label="组件类型" />
                <el-table-column prop="componentTemplate" label="组件内容" />
                <el-table-column prop="componentData" label="组件数据" />
                <el-table-column prop="componentComputed" label="计算属性" />
                <el-table-column align="center" width="300">
                    <template #header>
                        <span>操 作</span>
                    </template>
                    <template #default="scope">
                        <el-button v-if="scope.row.tenantId !== 'base' || currentTenantId === 'ywu'" size="small" type="success" @click="handleUpdate(scope.$index, scope.row)">修 改</el-button>
                        <el-button v-if="(scope.row.tenantId !== 'base' || currentTenantId === 'ywu' )&& scope.row.componentType === 'CUSTOM'" size="small" type="warning" @click="handleEdit(scope.$index, scope.row)">编 辑</el-button>
                        <el-button v-if="scope.row.tenantId !== 'base' || currentTenantId === 'ywu'" type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删 除</el-button>
                        <el-button v-if="scope.row.tenantId !== 'base' || currentTenantId === 'ywu'" type="primary" size="small" @click="handleCopy(scope.$index, scope.row)">复 制</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                v-model:current-page="componentDataList.pageIndex"
                v-model:page-size="componentDataList.pageSize"
                :small="false"
                :background="true"
                layout="prev, pager, next, jumper, sizes, total"
                :total="componentDataList.recordCount"
                @change="changePage"
                :page-sizes="[10, 20, 30, 50, 100, 200, 400]"
                style="float: right"
            />
        </div>
    </div>
    <div>
        <ComponentUpdateDialog :title="title" :componentForm="componentForm" />
        <ComponentDeleteDialog :componentForm="componentForm" />
    </div>
</template>

<script name="ComponentManage" setup lang="ts">
import ComponentSearch from "@/components/componentManage/ComponentSearch.vue";
import ComponentUpdateDialog from "@/components/componentManage/ComponentUpdateDialog.vue";
import ComponentDeleteDialog from "@/components/componentManage/ComponentDeleteDialog.vue";
import {createTag} from "@/utils/ywuCommon";
import {componentInfoQueryNoContent} from "@/request/components";
import {computed, ref} from "vue";
import {useComponentManageStore} from "@/stores/lowcode/componentManage";
import {useUserInfoStore} from "@/stores/userInfo/userInfo";
import {useRoute, useRouter} from "vue-router";

let componentForm = ref({});
let title = ref("");

let componentDataList = computed(() => {return useComponentManageStore().componentDataList});
let componentSearchData = computed(() => {return useComponentManageStore().componentSearchData});
let currentTenantId = computed(() => {return useUserInfoStore().userInfo['currentTenantInfo'].tenantId});

// 查询数据
componentInfoQueryNoContent(componentSearchData.value).then(res => {
    useComponentManageStore().resetComponentDataList(res.data);
})

// 创建标签
let route = useRoute();
createTag(route);

let router = useRouter();

function handleUpdate(index, raw) {
    title.value = "修改组件"
    componentForm.value = {
        id: raw.id,
        componentName: raw.componentName,
        componentCnName: raw.componentCnName,
        componentType: raw.componentType,
        componentTemplate: raw.componentTemplate,
        componentData: raw.componentData,
        componentComputed: raw.componentComputed,
        componentJson: raw.componentJson
    }
    useComponentManageStore().resetUpdateDialogVisible(true);
}

function handleDelete(index, raw) {
    componentForm.value = {
        id: raw.id,
        componentName: raw.componentName,
        componentCnName: raw.componentCnName,
        componentType: raw.componentType,
        componentTemplate: raw.componentTemplate,
        componentData: raw.componentData,
        componentComputed: raw.componentComputed,
        componentJson: raw.componentJson
    }
    useComponentManageStore().resetDeleteDialogVisible(true);
}

function handleCopy(index, raw) {
    title.value = "复制组件"
    componentForm.value = {
        id: "",
        componentName: raw.componentName,
        componentCnName: raw.componentCnName,
        componentType: raw.componentType,
        componentTemplate: raw.componentTemplate,
        componentData: raw.componentData,
        componentComputed: raw.componentComputed,
        componentJson: raw.componentJson
    }
    useComponentManageStore().resetUpdateDialogVisible(true);
}

function changePage(index, size) {
    componentSearchData.value["pageInfo"] = {
        pageIndex: index,
        pageSize: size
    };
    componentInfoQueryNoContent(componentSearchData.value).then(res => {
        if (res["code"] === '200') {
            useComponentManageStore().resetComponentDataList(res.data);
        }
    })
}

function handleEdit(index, raw) {
    // 发送路由
    router.push({path:'/super-ywu/lowcode/lowcodeBuilder',query: {id:raw.id}})
}
</script>

<style scoped lang="less">
.componentContainer {
    width: 98%;
    height: 100%;
    margin: 0.2%;
    .searchContainer {
        width: 100%;
        margin-top: 1%;
    }
    .tableContainer {
        margin-left: 1%;
    }
    .insertContainer {
        margin-left: 1%;
        margin-top: 0.7%;
    }
}
</style>